<template>
  <div class="modify-dialog">
    <slot> </slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible">
      <div class="page-wrap" style="height: 65vh">
        <Table
          :pagination="false"
          v-bind="tableOpts"
          defaultExpandAll
          v-on="tableEvent"
        >
        </Table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import tableMixins from "@/mixins/tableMixins.vue";

export default {
  name: "ProcurePaymentList",
  mixins: [tableMixins, modifyMixins],
  props: {
    tableApi: {
      type: String,
      default: "procureProcurePaymentList",
    },
    tableName: {
      type: String,
      default: "",
    },
    tableTitle: {
      type: String,
      default: "明细",
    },
    tableParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      apiName: "",
      dialogWidth: "80vw",
      form: {},
    };
  },
  computed: {
    columns() {
      const name = this.$options.name;
      const { tableColumn } = this;
      return this.$columns[tableColumn || name] || [];
    },
    title() {
      return this.tableTitle || "明细";
    },
  },
  watch: {
    tableApi: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        this.apiName = newValue;
      },
    },
  },
  mounted() {},
  methods: {
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.fetchCurrentTable();
    },
    formatQuery(opts) {
      const { date = [], ...params } = opts;
      if (date && date[0] && date[1]) {
        params.startTime = dayjs(date[0]).format("YYYY-MM-DD HH:mm:ss");
        params.endTime = dayjs(date[1]).format("YYYY-MM-DD HH:mm:ss");
      }
      // console.log(this.tableParams);
      return { ...params, ...this.tableParams };
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-table__expanded-cell) {
  padding: 0;
}

</style>
